<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/script/jquery.min.js"></script>
    <script src="/script/zui/js/zui.min.js"></script>
    <link href="/script/zui/css/zui.min.css" rel="stylesheet">


    <link href="/script/zui/lib/uploader/zui.uploader.min.css" rel="stylesheet">
    <script src="/script/zui/lib/uploader/zui.uploader.min.js"></script>

    <script src="/script/date/moment.js"></script>
    <script src="/script/art/template-web.js"></script>
    <script src="/script/art/template-web-ex.js"></script>
    <script src="/script/lib.js"></script>
    <script src="/script/layer/layer.js"></script>

    <style type="text/css">
        .uploader-body {
            margin: 50px auto;
            width: 800px;
        }
        
        .uploader-body .header {
            position: relative;
            clear: both;
            padding: 10px;
            text-align: center;
        }
        
        .uploader-body .content {
            position: relative;
            clear: both;
        }
        
        .uploader-body .uploader-content {
            position: relative;
            clear: both;
            height: 500px;
            overflow: auto;
            overflow-x: hidden;
        }
        
        .uploader-body .footer {
            position: relative;
            clear: both;
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="uploader-body">
        <div class="header">
            <ul class="nav nav-secondary nav-justified">
                <li class="active"><a href="your/noce/url">文件上传</a></li>
                <li><a href="your/noce/url">在线管理<span class="label label-badge label-success">4</span></a></li>
            </ul>
        </div>
        <div class="content">
            <div class="col-xs-3">
                <ul class="nav nav-tabs nav-stacked nav-stacked">
                    <li class="nav-heading">文件目录</li>
                    <li class="active">
                        <a href="###">产品</a>
                    </li>
                    <li>
                        <a href="###">活动产品</a>
                    </li>
                    <li>
                        <a href="###">用户logo</a>
                    </li>
                </ul>
            </div>
            <div class="col-xs-9">
                <div class="uploader-content">
                    <div id='uploader' class="uploader">
                        <div class="uploader-message text-center">
                            <div class="content"></div>
                            <button type="button" class="close">×</button>
                        </div>
                        <div class="uploader-files file-list file-list-grid"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div>
                <hr class="divider">
                <div class="uploader-status pull-right text-muted"></div>
                <button type="button" id="uploader-btn-browse" class="btn btn-link uploader-btn-browse"><i class="icon icon-plus"></i> 选择文件</button>
                <button type="button" class="btn btn-link uploader-btn-start"><i class="icon icon-cloud-upload"></i> 开始上传</button>
            </div>
        </div>
    </div>


    <ul id="pager" data-elements="size_menu" class="pager"></ul>
</body>

</html>
<script>
    $(function() {
        var options = {
            fileList: "grid",
            rename: false,
            renameByClick: false,
            lang: "zh_cn",
            browse_button: "#uploader-btn-browse"
        };
        $('#uploader').uploader(options);
        $("#btns").click(function() {

        })

    })
</script>